/**
 * @format
 */
import React from 'react';
import {Navigation} from 'react-native-navigation';
import TrackPlayer from 'react-native-track-player';
import AppErrorHandler from './src/components/AppErrorHandler';
import AsyncStorage from '@react-native-async-storage/async-storage';

import Home from './src/pages/home';
import Login from './src/pages/login';
import Playlist from './src/pages/playlist';
import Music from './src/pages/music';
import My from './src/pages/my';
import Rank from './src/pages/rank';
import Category from './src/pages/category';

import {
  showToast,
  showLoading,
  showModal,
  hideLoading,
  hideToast,
} from './src/utils';

const cachekey = `@ip`;
AsyncStorage.getItem(cachekey).then(cacheip => {
  console.log('cacheip', cacheip);
  if (!cacheip) {
    fetch('https://api.ipify.org/')
      .then(response => {
        return response.text();
      })
      .then(ip => {
        AsyncStorage.setItem(cachekey, ip);
        global.realIP = ip;
      });
  } else {
    global.realIP = cacheip;
  }
});

global.showToast = showToast;
global.showLoading = showLoading;
global.showModal = showModal;
global.hideLoading = hideLoading;
global.hideToast = hideToast;

Navigation.setDefaultOptions({
  statusBar: {
    visible: false,
  },
  topBar: {
    title: {
      color: '#FFFFFF',
    },
    noBorder: true,
    background: {
      color: '#363636',
    },
    backButton: {
      color: '#FFFFFF',
    },
    leftButtonColor: '#FFFFFF',
    elevation: 0,
  },
  layout: {
    backgroundColor: '#363636',
    componentBackgroundColor: '#363636',
    orientation: 'landscape',
  },
});

Navigation.registerComponent(
  'Home',
  () => props =>
    (
      <AppErrorHandler>
        <Home {...props} />
      </AppErrorHandler>
    ),
  () => Home,
);
Navigation.registerComponent(
  'Login',
  () => props =>
    (
      <AppErrorHandler>
        <Login {...props} />
      </AppErrorHandler>
    ),
  () => Login,
);
Navigation.registerComponent(
  'Playlist',
  () => props =>
    (
      <AppErrorHandler>
        <Playlist {...props} />
      </AppErrorHandler>
    ),
  () => Playlist,
);
Navigation.registerComponent(
  'Music',
  () => props =>
    (
      <AppErrorHandler>
        <Music {...props} />
      </AppErrorHandler>
    ),
  () => Music,
);
Navigation.registerComponent(
  'My',
  () => props =>
    (
      <AppErrorHandler>
        <My {...props} />
      </AppErrorHandler>
    ),
  () => My,
);
Navigation.registerComponent(
  'Rank',
  () => props =>
    (
      <AppErrorHandler>
        <Rank {...props} />
      </AppErrorHandler>
    ),
  () => Rank,
);
Navigation.registerComponent(
  'Category',
  () => props =>
    (
      <AppErrorHandler>
        <Category {...props} />
      </AppErrorHandler>
    ),
  () => Category,
);

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name: 'Home',
            },
          },
        ],
      },
    },
  });
});
